<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../static/dist/layui.js"></script>
    <link rel="stylesheet" href="../static/dist/css/layui.css">
    <script type="text/javascript" src="../static/dist/tableSelect.js"></script>
    <title>TableSelect</title>
    <style>
        .layui-table-cell{
            text-align:center;

            height: auto;

            white-space: normal;

        }

        .layui-table img{
            max-width:300px
        }
    </style>
    <style>
        .layuimini-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70vh;
        }
        .layuimini-main {
            width: 80%;
            max-width: 600px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
<div class="layui-row layui-bg-black" >
    <div class="layui-col-md1 layui-bg-black">
        <a href="http://localhost:5000/index">
            <img src="../static/logo.png" class="layui-logo" style="height:55px">
        </a>
        <!--        <p style="padding:27px"></p>-->
    </div>
    <div class="layui-col-md8 layui-bg-black">
        <form class="layui-form" action="" style="padding:11px">
            <div class="layui-form-item" style="height: 18px">
                <!--                <label class="layui-form-label"></label>-->
                <div class="layui-input-inline" style="width:860px">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="search">
                </div>
                <button type="button" class=" layui-btn layui-btn-primary  layui-btn-warm">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="layui-col-md3 layui-bg-black" >
        <ul class="layui-nav" style="padding:0px;bottom: 3px">
            <li class="layui-nav-item">
                <a href=""><img src="../static/yang.jpeg" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退了</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="">购物车<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">客服<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">注册/登录</a>
                <dl class="layui-nav-child">
                    <dd><a href="http://localhost:5000/register">注册</a></dd>
                    <dd><a href="http://localhost:5000/login">登录</a></dd>
                </dl>
            </li>

        </ul>

    </div>
</div>

<div class="layui-row  layui-bg-cyan" style="padding: 8px">
    <div class="layui-col-md1" style="left: 20px">
        <button type="button" class="layui-btn layui-btn-xs" >
            <i class="layui-icon layui-icon-down layui-font-12" ></i> 全部
        </button>
    </div>
    <div class="layui-col-md11" style="right: 20px">
         <span class="layui-breadcrumb" lay-separator="|">
              <a href=""></a>
              <a href="">八卦</a>
              <a href="">体育</a>
              <a href="">搞笑</a>
              <a href="">视频</a>
              <a href="">游戏</a>
              <a href="">综艺</a>
         </span>

    </div>
</div>

<div class="layui-main">
    <div class="layuimini-container">
        <div class="layuimini-main">

            <fieldset class="layui-elem-field layui-field-title" >
                <legend>用户信息提交</legend>
            </fieldset>

            <form class="layui-form" action="" lay-filter="userForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" value="男" title="男" checked="">
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-inline">
                        <input type="text" name="birthdate" id="birthdate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="submitUserForm">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>





<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
<script type="text/javascript">
    var form = layui.form;
    form.render();
    var tableSelect = layui.tableSelect;


    tableSelect.render({
        elem: '#search',
        checkedKey: 'id',
        table: {
            url: '../node_modules/layui/table.json',
            cols: [[
                { type: 'radio' },
                { field: 'id', title: 'ID' },
                { field: 'username', title: '姓名' },
                { field: 'sex', title: '性别' }
            ]]
        },
        done: function (elem, data) {
            var NEWJSON = []
            layui.each(data.data, function (index, item) {
                NEWJSON.push(item.username)
            })
            elem.val(NEWJSON.join(","))
        }
    })
</script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>


<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , laydate = layui.laydate;

        laydate.render({
            elem: '#birthdate'
        });

        form.on('submit(submitUserForm)', function (data) {
            var formData = data.field;
            console.log(formData);
            $.ajax({
                url: "/update/userinfo",
                type: "POST",
                data: formData,
                success: function(response) {
                    alert("更新成功！");
                },
                error: function(error) {
                    alert("在提交的时候出现了错误！");
                }
            });

            return false;
        });
    });
</script>
</html>